<template>
  <div class="deploy-system">
    <a-layout>
      <a-layout-header class="deploy-header">
        <div class="header-content">
          <div class="logo">
            <div class="logo-icon">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="32" height="32" rx="8" fill="#1890ff"/>
                <path d="M8 12L16 8L24 12V20L16 24L8 20V12Z" stroke="white" stroke-width="2" fill="none"/>
                <circle cx="16" cy="16" r="2" fill="white"/>
              </svg>
            </div>
            <div class="logo-text">
              <h2>Git Webhook</h2>
              <span>自动部署系统</span>
            </div>
          </div>
          <a-menu
            v-model:selectedKeys="selectedKeys"
            theme="dark"
            mode="horizontal"
            class="main-menu"
            @click="handleMenuClick"
          >
            <a-menu-item key="/" class="menu-item">
              <template #icon>
                <DashboardOutlined />
              </template>
              <span>仪表板</span>
            </a-menu-item>
            <a-menu-item key="/history" class="menu-item">
              <template #icon>
                <HistoryOutlined />
              </template>
              <span>部署历史</span>
            </a-menu-item>
            <a-menu-item key="/config" class="menu-item">
              <template #icon>
                <SettingOutlined />
              </template>
              <span>配置管理</span>
            </a-menu-item>
          </a-menu>
        </div>
      </a-layout-header>
      <a-layout-content class="deploy-content">
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { DashboardOutlined, HistoryOutlined, SettingOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const selectedKeys = ref([route.path])

watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath]
  }
)

const handleMenuClick = ({ key }) => {
  router.push(key)
}
</script>

<style scoped>
.deploy-system {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.deploy-header {
  background: rgba(0, 21, 41, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-text h2 {
  color: white;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.logo-text span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  display: block;
  line-height: 1;
}

.main-menu {
  background: transparent !important;
  border-bottom: none !important;
  line-height: 64px;
}

.main-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.main-menu .menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.main-menu .menu-item.ant-menu-item-selected {
  background: rgba(24, 144, 255, 0.2) !important;
  color: #1890ff !important;
}

.deploy-content {
  background: transparent;
  padding: 0;
  min-height: calc(100vh - 64px);
  position: relative;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  min-height: calc(100vh - 64px);
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 全局样式覆盖 */
:deep(.ant-layout-content) {
  background: transparent !important;
}

:deep(.ant-card) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

:deep(.ant-card-head) {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

:deep(.ant-btn-primary) {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  border: none;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

:deep(.ant-btn-primary:hover) {
  background: linear-gradient(135deg, #40a9ff, #1890ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

:deep(.ant-table) {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(250, 250, 250, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

:deep(.ant-statistic-content) {
  color: #1890ff;
}

:deep(.ant-progress-circle-trail) {
  stroke: rgba(0, 0, 0, 0.06);
}

:deep(.ant-tag) {
  border-radius: 6px;
  border: none;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
  }
  
  .logo-text h2 {
    font-size: 18px;
  }
  
  .logo-text span {
    display: none;
  }
  
  .content-wrapper {
    padding: 16px;
  }
  
  .main-menu .menu-item span {
    display: none;
  }
}

@media (max-width: 480px) {
  .logo-text {
    display: none;
  }
  
  .main-menu {
    font-size: 14px;
  }
}
</style>